<template>
  <!-- 企业、个人-招聘管理 -->
  <view
    class="box"
    @click=";(moreChage = false), (informationNoBubbles = false)"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <view class="dengLoadingVue" v-if="loading">
      <view class="maskVueHiddenShow">
        <view class="maskVueHiddenShowWrapper">
          <view class="loader">
            <view class="inner one"></view>
            <view class="inner two"></view>
            <view class="inner three"></view>
          </view>
          <view class="loading"> 数据加载中，请稍后... </view>
        </view>
      </view>
    </view>

    <view v-if="!loading">
      <view class="head">
        <!-- #ifdef MP-WEIXIN -->
        <view style="padding-top: 100rpx"></view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view style="padding-top: 100rpx"></view>
        <!-- #endif -->

        <view class="title">
          <image
            class="fanhui"
            @click.stop="goBack"
            src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
            mode=""
          >
          </image>
          <view class="title-text"> <span>招聘管理</span></view>
          <view class="search-box">
            <u--input class="search-input" shape="circle" v-model="keyword"></u--input>
            <img
              class="search-icon"
              src="https://pic.bangbangtongcheng.com/static/search-icon.png"
              alt=""
              @click="getResumeList"
            />
          </view>

          <template v-if="tabOne == 1">
            <span v-if="!deleteShow" class="delete-btn" @click.stop="openDelete">批量删除</span>
            <span v-else class="delete-btn delete-off" @click.stop="closeDelete">完成</span>
          </template>
          <span v-else class="delete-btn" style="background: transparent"></span>
        </view>

        <!-- 一级选项卡 -->
        <u-tabs
          :list="tabOption"
          lineWidth="0"
          :activeStyle="{
            color: '#0FA291',
            fontWeight: 'bold',
            transform: 'scale(1.1)',
          }"
          @click="changeTab"
        ></u-tabs>
      </view>

      <div class="main">
        <view v-if="tabOne == 0">
          <!-- 收到简历职位列表 -->
          <view v-if="pageList.length > 0" class="page-list">
            <view class="page-list-item" v-for="(item, index) in pageList" :key="item.id">
              <!-- 选中 -->
              <view v-if="deleteShow && tabOne == 1" @click="selectRow(item, index)">
                <view v-if="item.selected" class="page-select" style="border: 0">
                  <u-icon name="checkmark-circle-fill" color="#0FA291" size="40rpx"></u-icon>
                </view>
                <view v-else class="page-select"></view>
              </view>

              <!-- 内容 -->
              <view class="page-item" @click.stop="goResumeList(item)">
                <view class="item-content">
                  <view class="item-title">
                    <view class="title-tag">{{
                      item.recruitmentType == '1' ? '全职' : '兼职'
                    }}</view>
                    <view class="title-text">{{ item.title }}</view>
                  </view>
                  <view class="info1">
                    <span class="line-left">
                      招聘岗位：<span v-if="item.positionName" class="tag">{{
                        item.positionName
                      }}</span>
                    </span>
                    <span class="line-right">{{ item.salaryRangeText }}</span>
                  </view>
                </view>

                <view class="item-status">
                  <view class="wrap">
                    <view class="status"
                      >浏览次数：<span style="font-weight: 500">{{ item.viewCount }}</span>
                    </view>
                    <view class="status"
                      >收到简历：<span style="font-weight: 500">{{ item.resumeCount }}</span>
                    </view>
                    <view class="status"
                      >未读：<span style="font-weight: 500; color: #e00201"
                        >+{{ item.unreadCount }}</span
                      >
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 加载更多 -->
            <u-loadmore v-if="pageCount > 10" :status="status" @loadmore="loadmore" />
          </view>

          <!-- 空值 -->
          <view v-else class="empty-box">
            <image
              class="empty-image"
              src="https://pic.bangbangtongcheng.com/static/empty.png"
              mode=""
            ></image>
            <navigator url="/pages_my/myIssue" open-type="navigate" class="empty-btn">
              <span style="width: 28rpx"></span>
              <span>{{ btnText }}</span>
              <img
                style="width: 28rpx; height: 28rpx"
                src="https://pic.bangbangtongcheng.com/static/arrow-right-white.png"
                alt=""
              />
            </navigator>
          </view>
        </view>

        <view v-if="tabOne == 1">
          <!-- 二级选项卡 -->
          <view class="status-tabs">
            <view
              :class="item.checked ? 'tabs-item checked' : 'tabs-item'"
              v-for="(item, index) in statusOption"
              @click="changeStatus(item, index)"
              >{{ item.name }}
            </view>
          </view>

          <!-- 下载简历列表 -->
          <view v-if="downloadList.length > 0" class="download-list">
            <view class="page-list-item" v-for="(item, index) in downloadList" :key="item.id">
              <!-- 选中 -->
              <view v-if="deleteShow" @click="selectRow(item, index)">
                <view v-if="item.selected" class="page-select" style="border: 0">
                  <u-icon name="checkmark-circle-fill" color="#0FA291" size="40rpx"></u-icon>
                </view>
                <view v-else class="page-select"></view>
              </view>

              <!-- 内容 -->
              <view class="page-item">
                <view class="item-content">
                  <view class="info1" @click="goDetail(item)">
                    <img
                      style="margin-top: 10rpx"
                      :src="item.myPhoto || 'https://pic.bangbangtongcheng.com/static/avator.png'"
                      class="avator"
                      alt=""
                    />
                    <view style="margin-top: 10rpx">
                      <view>
                        <span class="name">{{ item.realName }}</span>
                        <span style="margin-left: 10rpx">{{ item.age }}岁</span>
                        <span style="margin-left: 30rpx">学历：{{ item.highestEducation }}</span>
                        <span style="margin-left: 30rpx">工作经验：{{ item.workYear }}年</span>
                      </view>
                      <view
                        style="
                          margin-top: 20rpx;
                          display: flex;
                          align-items: center;
                          flex-wrap: wrap;
                        "
                      >
                        <view style="margin-bottom: 20rpx">期望工作：</view>
                        <view v-for="(v, i) in item.jobNameArr" :key="'jobName' + i" class="tags">{{
                          v
                        }}</view>
                      </view>
                    </view>
                    <view v-if="item.whetherRead == 0" class="status">未读</view>
                  </view>

                  <view class="info2">
                    <view style="margin-top: 20rpx" class="introduction">
                      自我介绍：{{ item.introduction }}
                    </view>
                  </view>
                </view>

                <view class="item-status">
                  <view class="wrap">
                    <view class="status">
                      <span class="select-text" @click="item.selectBoxShow = !item.selectBoxShow">
                        <span>状态：{{ item.jobProgressText }}</span>
                        <img
                          :class="item.selectBoxShow ? 'arrow-right open' : 'arrow-right'"
                          src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right.png"
                          alt=""
                        />
                      </span>
                      <view v-show="item.selectBoxShow" class="select-box">
                        <view
                          v-for="(v, i) in jobProgressOption.slice(2, 4)"
                          :key="'jobProgress' + i"
                          :value="v.value"
                          :class="v.value === item.jobProgress ? 'checked' : ''"
                          @click="changeJobProgress(item, index, v)"
                        >
                          {{ v.name }}
                          <img
                            v-if="v.value === item.jobProgress"
                            class="checked-icon"
                            src="https://pic.bangbangtongcheng.com/static/checked.png"
                            alt=""
                          />
                        </view>
                      </view>
                    </view>

                    <span class="time" v-if="tabOne == 0">简历投递时间：{{ item.createDate }}</span>
                    <span class="time" v-if="tabOne == 1">下载时间：{{ item.createDate }}</span>
                  </view>
                </view>
              </view>
            </view>

            <!-- 加载更多 -->
            <u-loadmore v-if="pageCount > 10" :status="status" @loadmore="loadmore" />
          </view>

          <!-- 空值 -->
          <view v-else>
            <!-- 列表有数据时提示：没有更多数据了-->
            <view v-if="listNumber" class="none">
              <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
              <view>没有更多数据了</view>
            </view>

            <view v-else class="empty-box">
              <image
                class="empty-image"
                src="https://pic.bangbangtongcheng.com/static/empty.png"
                mode=""
              ></image>
              <navigator
                url="/pages_recruitMoney/index/index?changeTab=1"
                open-type="navigate"
                class="empty-btn"
              >
                <span style="width: 28rpx"></span>
                <span>{{ btnText }}</span>
                <img
                  style="width: 28rpx; height: 28rpx"
                  src="https://pic.bangbangtongcheng.com/static/arrow-right-white.png"
                  alt=""
                />
              </navigator>
            </view>
          </view>
        </view>
      </div>

      <!-- 弹出层 -->
      <u-popup :show="deleteShow" mode="bottom" :overlay="false" @close="closeDelete">
        <view class="delete-box">
          <view @click="selectAll">
            <view v-if="hasSelectAll" class="page-select" style="border: 0">
              <u-icon name="checkmark-circle-fill" color="#0FA291" size="40rpx"></u-icon>
            </view>
            <view v-else class="page-select"></view>
          </view>
          <span class="select-all">{{ hasSelectAll ? '取消全选' : '全选' }}</span>
          <span class="delete" @click="deleteModel">删除</span>
        </view>
      </u-popup>

      <!-- 删除确认框 -->
      <u-modal
        :show="confirmDelete"
        @confirm="confirm"
        @cancel="confirmDelete = false"
        ref="uModal"
        :asyncClose="true"
        confirmText="确定"
        confirmColor="#0FA291"
        showCancelButton
        cancelText="取消"
        cancelColor="#999"
      >
        <view class="slot-content">
          <view>确定删除选中的简历吗？</view>
          <!-- <view>删除后相应投递简历也将删除</view> -->
        </view>
      </u-modal>

      <!-- 返回顶部 -->
      <back-top :scrollTop="scrollTop"></back-top>
      <!-- 回到首页 -->
      <uniBall></uniBall>

      <view class="tips">仅显示最近一年的数据</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import _ from 'lodash'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif

  export default {
    data() {
      const userInfo = uni.getStorageSync('Pduser')
      return {
        loading: true,
        scrollTop: 0,
        userInfo: uni.getStorageSync('Pduser'),
        deleteShow: false, // 批量删除状态
        confirmDelete: false, // 确认删除弹窗
        tabOne: 0, // tab值
        tabOption: [
          {
            name: '收到简历',
            value: 0,
          },
          {
            name: '下载简历',
            value: 1,
          },
        ],
        btnText: '刷新信息增加更多曝光机会',
        // 所有状态
        statusOption: [
          {
            name: '全部',
            value: '',
            checked: true,
          },
          {
            name: '待沟通',
            value: 0,
          },
          {
            name: '沟通中',
            value: 1,
          },
          {
            name: '感兴趣',
            value: 2,
          },
          {
            name: '不满意',
            value: 3,
          },
        ],
        // 简历状态
        auditStatusOption: [
          {
            name: '待沟通',
            value: 0,
            disabled: true,
          },
          {
            name: '沟通中',
            value: 1,
          },
          {
            name: '感兴趣',
            value: 2,
          },
          {
            name: '不满意',
            value: 3,
          },
        ],
        // 简历状态
        jobProgressOption: [
          {
            name: '待沟通',
            value: 0,
          },
          {
            name: '沟通中',
            value: 1,
          },
          {
            name: '感兴趣',
            value: 2,
          },
          {
            name: '不满意',
            value: 3,
          },
        ],
        keyword: '',
        // 收到简历请求参数
        params: {
          userId: userInfo.id,
          keyword: '',
          pageNo: 1,
          pageSize: 10,
        },
        // 下载简历请求参数
        paramsDownload: {
          userId: userInfo.id,
          keyword: '',
          jobProgress: '', // ''：全部，0：待沟通，1：沟通中，2：感兴趣，3：不满意
          pageNo: 1,
          pageSize: 10,
        },
        pageList: [],
        pageCount: 0,
        status: 'loadmore',
        list: 15,
        page: 0,
        lon1: null, //当前位置的经度
        lat1: null, //当前位置的纬度
        show: false, // 弹出层显示
        hasSelectAll: false, //是否全选
        downloadList: [], //下载简历列表
        deleteShow: false, // 批量删除状态
        confirmDelete: false, // 删除确认框
        listNumber: 0, //列表条数
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    async onLoad() {
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onShow() {
      this.getResumeList()
    },
    // 上拉触发onReachBottom生命周期
    onReachBottom() {
      // 加载更多
      this.loadmore()
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop //实时获取到滚动的值
    },
    methods: {
      // 选项卡点击
      changeTab(item) {
        console.log('item', item)
        this.tabOne = item.value
        if (item.value == 0) {
          // 收到简历
          this.btnText = '刷新信息增加更多曝光机会'
          this.getResumeList()
        } else {
          // 下载简历
          this.paramsDownload.jobProgress = ''
          this.getDownloadList()
          this.btnText = '去发现更多可能'
        }
      },
      // 二级tab卡切换状态
      changeStatus(item, index) {
        this.statusOption.map((v) => (v.checked = false))
        this.statusOption[index].checked = true
        // 更新下载简历列表数据
        this.paramsDownload.jobProgress = item.value
        this.showEmpty = false
        this.getDownloadList()
      },
      // 获取收到简历列表
      async getResumeList() {
        this.params.keyword = this.keyword
        const res = await this.$myRequest.get(
          '/api/mobile/personnelOwner/getPostingResume',
          this.params
        )
        if (res.code === 200) {
          // 更改tab名称
          this.pageCount = res.postingResume.pageCount
          if (res.postingResume.quantityStatisticsList) {
            const { numberResumesReceived, numberResumesDownloaded } =
              res.postingResume.quantityStatisticsList[0]
            // 列表数量
            this.listNumber = numberResumesDownloaded
            // 一级tab卡切换状态
            this.tabOption[0].name = '收到简历' + numberResumesReceived
            this.tabOption[1].name = '下载简历' + numberResumesDownloaded
          }

          let list = res.postingResume.pageList
          list.map((v) => {
            v.selected = false
            // 加工薪资字段
            if (v.salaryRange.includes(',')) {
              v.salaryRangeText = v.salaryRange.split(',')[0] + v.salaryRange.split(',')[1]
            } else if (v.salaryRange === '面议') {
              v.salaryRangeText = v.salaryRange
            } else {
              v.salaryRangeText = v.salaryRange + '元'
            }
          })

          setTimeout(() => {
            this.pageList = list
            this.loading = false
          }, 0)
        }
      },

      // 获取下载简历列表
      async getDownloadList() {
        this.paramsDownload.keyword = this.keyword
        const res = await this.$myRequest.get(
          '/api/mobile/personnelOwner/getDownloadResumeTabulation',
          this.paramsDownload
        )
        if (res.code === 200) {
          // 更改tab名称
          this.pageCount = res.downloadResumeTabulation.pageCount
          if (res.downloadResumeTabulation.quantityStatisticsList) {
            const {
              numberResumesReceived,
              numberResumesDownloaded,
              toBeCommunicated,
              toBeInterviewed,
              interestedIn,
              notSatisfied,
            } = res.downloadResumeTabulation.quantityStatisticsList[0]
            // 列表数量
            this.listNumber = numberResumesDownloaded
            // 一级tab卡切换状态
            this.tabOption[0].name = '收到简历' + numberResumesReceived
            this.tabOption[1].name = '下载简历' + numberResumesDownloaded
            // 二级tab卡切换状态
            this.statusOption[0].name = '全部' + numberResumesDownloaded
            this.statusOption[1].name = '待沟通' + toBeCommunicated
            this.statusOption[2].name = '沟通中' + toBeInterviewed
            this.statusOption[3].name = '感兴趣' + interestedIn
            this.statusOption[4].name = '不满意' + notSatisfied
          }

          let list = res.downloadResumeTabulation.pageList
          // 计算工作经验
          list.map((v) => {
            v.selected = false
            v.selectBoxShow = false
            // 工作经验(后端返回数据不稳定)
            if (v.workingTime.length > 4) {
              v.workingTime = v.workingTime.slice(0, 4)
            }
            // 计算工作经验
            const newDate = new Date()
            const year = newDate.getFullYear()
            v.workYear = year - Number(v.workingTime)

            // 期望工作
            if (v.intendedPosition) {
              const intendedPosition = JSON.parse(v.intendedPosition)
              const jobNameArr = intendedPosition.map((item) => {
                return item.split(',')[item.split(',').length - 1]
              })
              v.jobNameArr = jobNameArr
            }

            // 加工状态字段
            v.jobProgressText = this.jobProgressOption.find(
              (item) => item.value === v.jobProgress
            ).name

            // 默认头像
            if (!v.myPhoto) {
              // 从1-5中随机取数,给一个随机的默认头像
              const index = Math.floor(Math.random() * 5) + 1
              if (v.sexualDistinction == '1') {
                // 男生头像
                v.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/m${index}.png`
              } else {
                v.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/w${index}.png`
              }
            }
          })

          setTimeout(() => {
            this.downloadList = list
            this.loading = false
          }, 0)
          console.log('this.downloadList', this.downloadList)
        }
      },
      // 跳转收到简历详情
      goResumeList(item) {
        if (item.auditStatus == 0) {
          uni.showToast({
            title: '该简历已下架或已找到工作',
            icon: 'none',
          })
          return
        }

        if (item.job_status == 2) {
          uni.showToast({
            title: '该简历已下架或者已找到工作',
            icon: 'none',
          })
          return
        }

        uni.navigateTo({
          url: `/pages_recruitMoney/my/recruitmentManagementList?id=${item.id}`,
        })
      },
      // 跳转到下载简历详情
      goDetail(item) {
        uni.navigateTo({
          url: `/pages_recruitMoney/my/recruitmentManagementDetail?id=${item.id}&resumeId=${item.resumeId}&navigateType=download`,
        })
      },

      // 加载更多
      async loadmore() {
        const maxPage = Math.ceil(this.pageCount / this.params.pageSize)
        if (this.page >= maxPage) return
        this.params.pageNo++
        this.getResumeList()
      },
      // 选中Row
      selectRow(item, index) {
        this.$set(this.downloadList, index, {
          ...this.downloadList[index],
          selected: !this.downloadList[index].selected,
        })
        // 如果取消了一条，就取消全选
        this.hasSelectAll = this.downloadList.every((v) => v.selected)
      },

      // 弹出层
      openDelete() {
        if (this.tabOne == 1) {
          this.deleteShow = true
          this.show = true
          this.hasSelectAll = false
        }

        // console.log('open');
      },
      closeDelete() {
        this.deleteShow = false
        // console.log('close');
      },

      // 全选
      selectAll() {
        this.hasSelectAll = !this.hasSelectAll
        if (this.hasSelectAll) {
          this.downloadList.map((v) => (v.selected = true))
        } else {
          this.downloadList.map((v) => (v.selected = false))
        }
      },
      //打开删除确认框
      deleteModel() {
        const number = this.downloadList.filter((v) => v.selected).length
        console.log('nuber', number)
        if (number) {
          this.confirmDelete = true
        } else {
          uni.showToast({
            title: '请选择要删除的数据',
            icon: 'none',
          })
        }
      },

      // 未选中删除弹窗
      showModal() {
        const count = this.downloadList.filter((v) => v.selected).length
        if (count === 0) {
          uni.showToast({
            title: '请选择要删除的数据',
            icon: 'none',
          })
        } else {
          this.confirmDelete = true
        }
      },
      // 确认删除
      async confirm() {
        const deleteList = this.downloadList.filter((v) => v.selected)
        const ids = deleteList.map((v) => v.id).join(',')
        const params = {
          ids,
        }
        // return
        const res = await this.$myRequest.post(
          '/api/mobile/personnelOwner/deleteDownloadResume',
          params
        )
        if (res.code === 200) {
          // 关闭删除确认弹窗
          this.confirmDelete = false
          // 关闭全选删除弹窗
          this.deleteShow = false
          this.downloadList = []
          this.getDownloadList()
        }
      },
      // 更改单条投递简历数据状态
      async changeJobProgress(item, index, v) {
        // item-当前对象，index-当前列表下标，v-当前选中状态的选项
        console.log('index', index)
        console.log('v', v)
        if (!v.disabled) {
          this.downloadList[index].auditStatus = v.value
          this.downloadList[index].jobProgressText = v.name
        }
        // 请求接口，切换状态
        const statusParams = {
          id: item.id,
          status: v.value, //兴趣级别（2：感兴趣，3：不满意）
        }
        const res = await this.$myRequest.post(
          '/api/mobile/personnelOwner/modifyDialogueState',
          statusParams
        )
        if (res.code === 200) {
          this.downloadList[index].selectBoxShow = false
          this.getDownloadList()
        }
      },

      goBack() {
        uni.navigateBack({
          delta: 1,
        })
      },

      // 旧代码------------------------------------
      handleTouchStart(event) {
        console.log('@@@')
        // 记录开始触摸的Y坐标
        this.startY = event.touches[0].clientY
      },
      handleTouchMove(event) {
        // 当前触摸的Y坐标
        const currentY = event.touches[0].clientY
        // 计算滑动的距离
        const distance = currentY - this.startY
        // 根据滑动的距离判断是上滑还是下滑
        if (distance > 6) {
          // 上滑操作
          this.isViewVisible = true
        } else if (distance < -6) {
          // 下滑操作
          this.isViewVisible = false
        }
      },
      handleTouchEnd() {
        // 可以在这里做一些触摸结束后的处理
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },

      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    padding-top: 282rpx;
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7f9;
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 0 20rpx;
    width: 100%;
    background: url('https://pic.bangbangtongcheng.com/static/MyHomePages/my-public.png') 0 0
      no-repeat;
    background-size: cover;

    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;

      .fanhui {
        width: 30rpx;
        height: 30rpx;
      }

      .title-text {
        position: relative;
        margin-left: 10rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
      }

      .search-box {
        position: relative;
        margin-left: 20rpx;
        margin-right: 20rpx;

        .search-input {
          width: 142rpx;
          height: 40rpx;
          line-height: 30rpx;
          border-radius: 22rpx;
        }

        .search-icon {
          position: absolute;
          top: 50%;
          right: 15rpx;
          transform: translateY(-50%);
          width: 25rpx;
          height: 25rpx;
          background: #fff;
        }
      }

      .delete-btn {
        margin-right: 235rpx;
        display: inline-block;
        min-width: 130rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        background: #0fa291;
        border-radius: 22rpx;
      }

      .delete-off {
        color: #0fa291;
        background: #fff;
        border: 1rpx solid #196864;
      }
    }

    .u-tabs {
      margin-top: 15rpx;
    }
  }

  .main {
    margin-bottom: 200rpx;
    // overflow: hidden;

    .empty-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;

      .empty-image {
        margin-top: 240rpx;
        width: 400rpx;
        height: 309rpx;
      }

      .empty-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 60rpx;
        padding: 0 20rpx;
        width: 600rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        font-weight: 500;
        color: #fff;
        font-size: 32rpx;
        background: #0fa291;
        border-radius: 45rpx;
      }
    }

    // 空状态
    .none {
      text-align: center;

      image {
        width: 430rpx;
        margin-bottom: 16rpx;
      }

      view {
        height: 40rpx;
        line-height: 40rpx;
        color: #666;
      }
    }

    .status-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 20rpx;
      width: 100%;
      overflow-x: auto;

      .tabs-item {
        margin-right: 20rpx;
        display: inline-block;
        min-width: 100rpx;
        padding: 10rpx;
        text-align: center;
        font-size: 24rpx;
        color: #666;
        border-radius: 10rpx;
        border: 1rpx solid #999999;
      }

      .checked {
        color: #0fa291;
        background: #e7f5f4;
        border: 1rpx solid #64b6a8;
      }
    }

    .page-list {
      padding-bottom: 100rpx;

      .page-list-item {
        margin: 20rpx;
        display: flex;
        align-items: center;
        // width: 800rpx;

        .page-item {
          width: 710rpx;

          .item-content {
            padding: 20rpx;
            background: #fff;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            border: 1rpx solid #f1f5f5;

            .item-title {
              display: flex;
              align-items: center;
              width: 100%;

              .title-tag {
                padding: 8rpx 11rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #0fa291;
                background: #e7f5f4;
                border-radius: 4rpx;
              }

              .title-text {
                flex: 1;
                margin-left: 10rpx;
                font-size: 32rpx;
                font-weight: 500;
                color: #000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .info1 {
              margin-top: 24rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .line-left {
                display: flex;
                align-items: center;
              }

              .line-right {
                text-align: right;
                font-weight: 600;
                font-size: 32rpx;
                color: #e00201;
              }
            }

            .tag {
              padding: 8rpx 14rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #666;
              background: #f5f7f9;
              border-radius: 4rpx;
            }
          }

          .item-status {
            padding: 0 20rpx;
            background: #fff;
            border-radius: 0 0 20rpx 20rpx;

            .wrap {
              padding: 20rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #666;
              // border-top: .5rpx solid #F1F5F5;
            }
          }
        }
      }
    }

    .download-list {
      padding-bottom: 140rpx;

      .page-list-item {
        margin: 20rpx;
        display: flex;
        align-items: center;
        // width: 800rpx;

        .page-item {
          position: relative;
          width: 710rpx;

          .item-content {
            padding: 10rpx 10rpx 0 20rpx;
            background: #fff;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            border: 1rpx solid #f1f5f5;

            .item-title {
              display: flex;
              align-items: center;
              width: 100%;

              .title-tag {
                padding: 8rpx 11rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #0fa291;
                background: #e7f5f4;
                border-radius: 4rpx;
              }

              .title-text {
                flex: 1;
                margin-left: 10rpx;
                font-size: 32rpx;
                font-weight: 500;
                color: #000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .info1 {
              display: flex;
              // justify-content: space-between;
              align-items: flex-start;
              color: #333;
              font-size: 24rpx;

              .avator {
                margin-right: 20rpx;
                width: 92rpx;
                height: 92rpx;
                border-radius: 50%;
              }

              .name {
                font-size: 32rpx;
                font-weight: 500;
                color: #000000;
              }

              .tags {
                padding: 8rpx 14rpx;
                background: #f5f7f9;
                border-radius: 4rpx;
                margin: 0 10rpx 20rpx 0;
              }
            }

            .info2 {
              .introduction {
                width: 100%;
                height: 70rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .status {
              position: absolute;
              top: 10rpx;
              right: 10rpx;
              padding: 2rpx 15rpx;
              color: #fff;
              font-size: 24rpx;
              background: #e00201;
              border-radius: 22rpx;
            }
          }

          .item-status {
            padding: 0 20rpx;
            background: #fff;
            border-radius: 0 0 20rpx 20rpx;

            .wrap {
              padding: 20rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-top: 0.5rpx solid #f1f5f5;

              .status {
                position: relative;

                .select-text {
                  padding: 0 10rpx;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 220rpx;
                  height: 50rpx;
                  line-height: 50rpx;
                  color: #666;
                  font-size: 24rpx;
                  background: #f5f7f9;
                  border-radius: 6rpx;
                  border: 1rpx solid #ebebed;

                  .arrow-right {
                    margin-left: auto;
                    width: 28rpx;
                    height: 28rpx;
                    transform: rotate(90deg);
                    transition: all 0.3s ease-in-out;
                  }

                  .open {
                    transform: rotate(-90deg);
                  }
                }

                .select-box {
                  position: absolute;
                  left: 0;
                  top: 50rpx;
                  z-index: 3;
                  width: 240rpx;
                  line-height: 70rpx;
                  text-align: center;
                  font-size: 28rpx;
                  color: #333;
                  background: #f5f7f9;
                  border-radius: 6rpx;
                  border: 1rpx solid #ebebed;

                  .checked {
                    position: relative;
                    background: #e7f5f4;

                    .checked-icon {
                      position: absolute;
                      top: 50%;
                      right: 10rpx;
                      transform: translateY(-50%);
                      width: 28rpx;
                      height: 28rpx;
                    }
                  }
                }
              }

              .time {
                margin-left: 40rpx;
                font-size: 24rpx;
                color: #666;
              }
            }
          }
        }
      }
    }
  }

  .page-select {
    margin-right: 20rpx;
    width: 38rpx;
    height: 38rpx;
    border: 0.5rpx solid #0fa291;
    border-radius: 50%;
  }

  .delete-box {
    display: flex;
    align-items: center;
    padding: 54rpx 39rpx;
    width: 100%;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    box-shadow: 0 -10rpx 20rpx 0 #dde4e3;

    .select-all {
      margin-right: 50rpx;
      font-size: 32rpx;
      color: #000;
    }

    .delete {
      font-size: 32rpx;
      color: #666;
    }
  }

  .tips {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    background: #f5f7f9;
  }

  .dengLoadingVue {
    .maskVueHiddenShow {
      z-index: 999999;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;

      .maskVueHiddenShowWrapper {
        width: 80%;
        height: 300rpx;
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        animation: 0.5s;

        .loading {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
  }

  .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #64b6a8;
  }

  .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #64b6a8;
  }

  .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #64b6a8;
  }

  @keyframes rotate-one {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-two {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-three {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }

  @keyframes maskVueHiddenShowWrapper {
    0% {
      width: 80%;
    }

    100% {
      width: 0;
    }
  }

  .down {
    margin-bottom: 50rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }
</style>
